import * as Cesium from "cesium";
import BaseDraw from "./BaseDraw";

/**
 * 绘制线
 */
export default class DrawPolyline extends BaseDraw {
  constructor(options) {
    super(options);
    this.currentDrawId = ""; // 每次绘制的id, 根据此id 进行entity管理
    this.polylineEntity = null; // 折线实体
    this.labelEntity = null; // 标签实体
    this.positionList = []; // 当次绘制的笛卡尔数组
  }
  // 重置绘制中间量
  resetDraw() {
    this.currentDrawId = this.generateUUID(); // 当次绘制的-id
    this.polylineEntity = null; // 当次绘制的-圆实例
    this.labelEntity = null; // 当次绘制的-标签实例
    this.positionList = []; // 当次绘制的笛卡尔数组
  }
  // 实体加入到集合管理类中进行管理
  addEntityCollection(entity) {
    this.entityCollection.add(entity, this.currentDrawId);
  }
  getAllEntity() {
    return this.entityCollection.getAll();
  }
  // 关闭 CallbackProperty的计算，取最后一次的结果
  removeCallbackProperty() {
    if (this.labelEntity) {
      this.labelEntity.position = this.labelEntity.position.getValue();
      this.labelEntity.label.text = this.labelEntity.label.text.getValue();
    }
    if (this.polylineEntity) {
      this.polylineEntity.polyline.positions =
        this.polylineEntity.polyline.positions.getValue();
    }
  }
  createLabelEntity() {
    const _this = this;
    const positionList = this.positionList;
    const entity = new Cesium.Entity({
      position: new Cesium.CallbackProperty(
        () => positionList[positionList.length - 1],
        false
      ),
      label: {
        text: new Cesium.CallbackProperty(() => {
          const length = _this._caculater.distance(positionList); // 计算表路径
          return length < 1
            ? `长度:${(length * 1000).toFixed(2)}米`
            : `长度:${length.toFixed(2)}千米`;
        }, true),
        font: "20px",
        color: Cesium.Color.RED,
        pixelOffset: new Cesium.Cartesian2(0, -20),
        fillColor: Cesium.Color.WHITE,
        showBackground: true,
        backgroundColor: Cesium.Color.BLUE,
      },
    });

    return entity;
  }
  createPolylineEntity() {
    const positionList = this.positionList;
    const entity = new Cesium.Entity({
      polyline: {
        positions: new Cesium.CallbackProperty(() => positionList, false), // CallbackProperty 动态属性
        material: Cesium.Color.YELLOW,
        width: 4,
      },
    });

    return entity;
  }
}

/**
 * 开始绘制折线
 * @param {* 是否显示测量Label} showMeasureLabel
 * @param {* 是否连续绘制} continuousDraw
 */
DrawPolyline.prototype.startDraw = function (
  showMeasureLabel = true,
  continuousDraw = true
) {
  const _this = this;
  this.resetDraw(); // 重置绘制中间量
  const customType = this.customType;

  this._tip.show("单击开始绘制");
  // 左键点击事件
  this._handler.addHandelEvent(
    (event) => {
      const cartesian = this._coorder.ScreenToCartesian3(event.position); // 屏幕坐标转世界坐标
      if (!Cesium.defined(cartesian)) return;
      _this.positionList.push(cartesian.clone());
      // 测量label
      if (showMeasureLabel && !_this.labelEntity) {
        _this.labelEntity = _this.createLabelEntity();
        _this.addEntityCollection(_this.labelEntity);
      }
      // 折线实体
      if (!_this.polylineEntity) {
        _this.polylineEntity = _this.createPolylineEntity();
        _this.addEntityCollection(_this.polylineEntity);
      }

      _this._tip.changeText("右键结束绘制");
    },
    customType,
    Cesium.ScreenSpaceEventType.LEFT_CLICK
  );
  // 鼠标移动事件
  this._handler.addHandelEvent(
    (event) => {
      if (_this.polylineEntity) {
        const cartesian = this._coorder.ScreenToCartesian3(event.endPosition); // 屏幕坐标转世界坐标
        if (!Cesium.defined(cartesian)) return;
        const positionList = _this.positionList;
        if (positionList.length === 1) {
          positionList.push(cartesian.clone());
        } else if (positionList.length >= 2) {
          positionList.pop();
          positionList.push(cartesian.clone());
        }
      }
      const { x, y } = event.endPosition;
      _this._tip.moveTipDOMPosition(x, y); // 改变 TipDOM 位置
    },
    customType,
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
  // 右键点击事件
  this._handler.addHandelEvent(
    (event) => {
      this.endDraw();
      // 连续绘制
      if (continuousDraw) {
        this.startDraw();
      }
    },
    customType,
    Cesium.ScreenSpaceEventType.RIGHT_CLICK
  );
};
/**
 * 结束绘制点
 */
DrawPolyline.prototype.endDraw = function () {
  this._tip.close();
  this.removeCallbackProperty(); // 删除callbackproperty
  // 解绑事件
  const customType = this.customType;
  this._handler.removeHandelEvnet(
    customType,
    Cesium.ScreenSpaceEventType.LEFT_CLICK
  );
  this._handler.removeHandelEvnet(
    customType,
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
  );
  this._handler.removeHandelEvnet(
    customType,
    Cesium.ScreenSpaceEventType.RIGHT_CLICK
  );
  this.resetDraw(); // 重置绘制中间量
};
/**
 * 清除绘制的点
 */
DrawPolyline.prototype.removeDraw = function () {
  const entityCollection = this.entityCollection; // entity集合
  entityCollection.removeAll();
};
